<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="订单管理">
      <div class="app-container">
        <el-table v-loading="loading" :data="orders" stripe style="width: 100%; ">
          <el-table-column prop="id" label="#" width="38"/>
          <el-table-column prop="user.username" label="下单用户" width="100"/>
          <el-table-column prop="user.phone" label="用户手机号" width="110"/>
          <el-table-column prop="order_time" :formatter="convertPayTime" label="下单时间" width="170"/>
          <el-table-column prop="tprice" label="总价" width="90"/>
          <el-table-column prop="pay_status" :formatter="convertPay" label="支付状态" width="80"/>
          <el-table-column prop="pay_time" :formatter="convertPayTime" label="支付时间" width="150"/>
          <el-table-column label="支付方式" width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.pay_way !== '' ? scope.row.pay_way : '未支付' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="delivery_status" :formatter="convertDelivery" label="发货状态" width="80"/>
          <el-table-column prop="delivery_time" :formatter="convertDeliveryTime" label="发货时间" width="150"/>
          <el-table-column prop="delivery_company" label="物流公司" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.delivery_company !== '' ? scope.row.delivery_company : '未发货' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="内容详情" width="100">
            <template slot-scope="scope">
              <el-button type="primary" @click="handleDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog title="详情管理" :visible.sync="detailDialogVisible">
          <ul>
            <el-table :data="selectedRow.detail" stripe style="width: 100%">
              <el-table-column type="index" label="#"/>
              <el-table-column label="商品图">
                <template slot-scope="scope">
                  <el-image style="width: 100px; height: 100px" :src="scope.row.picture"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="goods.name" label="商品名"/>
              <el-table-column label="商品属性">
                <template slot-scope="scope">
                  <ul style="margin-left: -25px">
                    <li v-for="(value,key) in scope.row.sku">{{ key }} : {{ value }}</li>
                  </ul>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="数量"/>
            </el-table>
            <template>
              <div v-if="selectedRow.delivery_company===''">
                <el-select style="margin-top: 20px; margin-left: 20px" v-model="selectedCompany" placeholder="请选择物流公司">
                  <el-option
                    v-for="item in logisticsCompany"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
                <el-button style="margin-left: 20px" @click="doDelivery">发货</el-button>
              </div>
              <div v-else style="margin-left: 20px; margin-top: 20px">
                <i class="el-icon-success"></i><span> 已发货</span>
              </div>
            </template>
          </ul>
          <div slot="footer" class="dialog-footer">
            <el-button @click="detailDialogVisible = false">关闭</el-button>
          </div>
        </el-dialog>
      </div>
    </el-alert>
  </div>
</template>

<script>
import { getOrders, getLogisticsCompany, doDelivery } from '@/api/order'

export default {
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      totalPage: 1,
      orders: [],
      logisticsCompany: [],
      selectedRow: '',
      selectedCompany: '',
      detailDialogVisible: false
    }
  },
  mounted() {
    this.getOrders()
    this.getLogisticsComp()
  },
  methods: {
    getOrders() {
      this.loading = true
      getOrders(this.page, this.pageSize).then(res => {
        this.orders = res.data
        this.totalPage = res.totalPage
        this.loading = false
      })
    },
    getLogisticsComp() {
      getLogisticsCompany().then(res => {
        this.logisticsCompany = res.data
      })
    },
    handleDetail(row) {
      this.detailDialogVisible = true
      this.selectedRow = row
    },
    doDelivery() {
      doDelivery(this.selectedRow.id, this.selectedCompany).then(res => {
        this.getOrders()
        this.$message('发货成功!')
        this.detailDialogVisible = false
      })
    },
    convertTime(time) {
      let now = new Date(time * 1000),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate()
      return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + now.toTimeString().substr(0, 8)
    },
    convertPayTime(row, column, cellValue) {
      if (cellValue === 0) {
        return '未支付'
      }
      return this.convertTime(cellValue)
    },
    convertDeliveryTime(row, column, cellValue) {
      if (cellValue === 0) {
        return '未发货'
      }
      return this.convertTime(cellValue)
    },
    convertDelivery(row) {
      return row.delivery_status === 0 ? '未发货' : '已发货'
    },
    convertPay(row) {
      return row.pay_status === 0 ? '未支付' : '已支付'
    }
  }
}
</script>
